<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" ></script>
<title>js-2dmath: Demostration of various Intersections</title>

<script src="../dist/js-2dmath-browser.min.js" type="text/javascript" ></script>
<!--
<script src="../debug/js-2dmath-browser-debug.js" type="text/javascript" ></script>
-->

</head>
<body>
<h1>js-2dmath: Demostration of various Intersections</h1>
<canvas id="canvas" width="680" height="680" style="border: 1px solid red;"></canvas>
</body>
</html>

<script>
//
// --- INIT ---
//
//expose js-2dmath globally, I'm lazy!
require("js-2dmath").globalize(window);

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
Draw.invertAxis(canvas, ctx); // y-up
ctx.translate(canvas.width * 0.5, canvas.height * 0.5); // center
Draw.cartesianAxis(ctx, 320, 16); // coordinates

//
// code
//

Draw.text(ctx, "45º", [50, 35]);
Draw.angle(ctx, [0,0], Math.HALF_PI * 0.5, "black", 100);

var angle = Vec2.angleTo([0, 0], [50, 50]);
Draw.text(ctx, "-45º = Vec2.angleTo([0, 0], [50, -50])", [50, -35])
Draw.angle(ctx, [0,0], angle, "red", 100);
console.log((angle * Math.RAD_TO_DEG).toFixed(0));

var angle = Vec2.angleTo([0, 0], [-50, 50]);
Draw.text(ctx, "-45º = Vec2.angleTo([0, 0], [50, 50])", [-50, -35])
Draw.angle(ctx, [0,0], angle, "green", 100);
console.log((angle * Math.RAD_TO_DEG).toFixed(0));

var angle = Vec2.angleTo([0, 0], [-50, -50]);
Draw.text(ctx, "-45º = Vec2.angleTo([0, 0], [50, 50])", [-50, -35])
Draw.angle(ctx, [0,0], angle, "blue", 100);
console.log((angle * Math.RAD_TO_DEG).toFixed(0));

var angle = Vec2.angleTo([0, 0], [50, -50]);
Draw.text(ctx, "-45º = Vec2.angleTo([0, 0], [50, 50])", [50, -35])
Draw.angle(ctx, [0,0], angle, "black", 100);
console.log((angle * Math.RAD_TO_DEG).toFixed(0));

</script>